<template>
<div>

  <van-nav-bar
    title="地址管理"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-address-list v-if="this.$store.state.username != null"
    v-model="chosenAddressId"
    :list="list"
    :disabled-list="disabledList"
    disabled-text="以下地址超出配送范围"
    default-tag-text="默认"
    @add="onAdd"
    @edit="onEdit"
  />
  <template v-else>
    <van-empty description="还未登录哦(⊙o⊙)？前往登录吧">
      <van-button round type="danger" class="bottom-button" @click="login">登录</van-button>
    </van-empty>
  </template>
</div>
</template>

<script>
  import { Toast } from 'vant';
  export default {
    data() {
      return {
        chosenAddressId: '1',
        list: [

        ],
        disabledList: [
          {
            id: '3',
            name: '王五',
            tel: '1320000000',
            address: '浙江省杭州市滨江区江南大道 15 号',
          },
        ],
      };
    },
    methods: {
      getAddressList(){
        this.$axios.post("/getAddressList").then( req => {
          this.list = req.data.data
          console.log(req)
        })
      },
      onAdd() {
        this.$router.push("/addressEdit")
      },
      onEdit(item, index) {
        Toast('编辑地址:' + index);
      },
      onClickLeft() {
        this.$router.go(-1)
      },
      onClickRight() {
        Toast('按钮');
      },
      login(){
        this.$router.push('login')
      }
    },
    created(){
      this.getAddressList();
    }
  };
</script>

<style scoped>

  .van-address-list__add{
    margin-bottom: 100px;
  }
  .bottom-button {
    width: 160px;
    height: 40px;
  }
</style>
